<template>
  <div>
    <input type="text" :placeholder="label" v-model="value" />
    <span v-if="error" :class="{ error }">有误</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      error: false
    }
  },
  props: {
    label: {
      type: String,
      required: true
    }
  },
  watch: {
    value(n, o) {
      if (n.length > 3) {
        this.error = true
      } else {
        this.error = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.error {
  color: red;
}
</style>
